<template>

    <div class="tabbar">
        <template v-for="(item, index) in tarbarData">
            <div class="tabbar-item" 
                :class="{active: currentIndex === index}"
                @click="itemClick(index,item)"
                >
                <img v-if="currentIndex!==index" :src="getAssetsFile(item.image)" alt="">    
                <img  v-else="currentIndex==index" :src="getAssetsFile(item.imageActive)" alt="">    
                <span class="text">{{ item.text }}</span>
             </div>
        </template>
    </div>
</template>

<script setup>
    import tarbarData from '@/assets/data/tarbar';
    import getAssetsFile from '@/utils/getFile';
    import {ref} from 'vue';
    import { useRouter } from 'vue-router';
    const currentIndex=ref(0)
    const router=useRouter()
    function itemClick(index,item){
        currentIndex=index
        router.push(item.path)
    }
   
</script>

<style  lang="less" scoped>
    .tabbar{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        display: flex;
        .tabbar-item{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            &.active {
                color: var(--primary-color);
            }
            img {
                width: 36px;
            }
            .text{
                font-size: 12px;
                margin-top: 2px;
            }
        }
    }
</style>